<div class="card">
  <!-- 货品信息头部 -->
  <div class="card-header bg-light">
    <div class="row align-items-center">
      <div class="col">
        <h5 class="mb-0">
          <span class="badge bg-primary me-2">商品编码</span>
          <span class="fw-bold">{{ goodsInfo.code }}</span>
          
          <span class="ms-3 badge bg-success me-2">商品类型</span>
          <span>{{ goodsInfo.name }}</span>
          
          <span class="ms-3 badge bg-info me-2">规格型号</span>
          <span>{{ goodsInfo.specification }}</span>
          
          <span class="ms-3 badge bg-warning me-2">尺寸</span>
          <span>{{ goodsInfo.model }}</span>
          
          <span class="ms-3 badge bg-secondary me-2">单位</span>
          <span>{{ goodsInfo.unit }}</span>
        </h5>
      </div>
      <div class="col-auto">
        <a [routerLink]="['/stock/pi-ci-cha-xun']" class="btn btn-sm btn-outline-primary">
          <i class="fa fa-arrow-left me-1"></i>返回批次查询
        </a>
      </div>
    </div>
  </div>
  
  <!-- 调试信息 -->
  <div class="card-body border-bottom bg-light" *ngIf="apiError">
    <div class="alert alert-warning mb-0">
      <strong>提示：</strong> 由于API请求失败，当前显示的是基于商品编码 <strong>{{ goodsInfo.code }}</strong> 的模拟数据。
      <div>错误信息: {{ errorMessage }}</div>
    </div>
  </div>
  
  <!-- 搜索条件区域 -->
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 100px;">出入库单号:</label>
            <div class="input-group">
              <input type="text" class="form-control" [(ngModel)]="queryParams.ChuRuKuDanHao" name="ChuRuKuDanHao" 
                    placeholder="请输入出入库单号/入库单号">
              <button *ngIf="queryParams.ChuRuKuDanHao" class="btn btn-outline-secondary" type="button" (click)="clearBatchNumber()">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 100px;">仓库名称:</label>
            <select class="form-select" [(ngModel)]="queryParams.CangKuMingCheng" name="CangKuMingCheng">
              <option [ngValue]="null">全部</option>
              <option *ngFor="let cangKu of cangKuOptions" [value]="cangKu">{{ cangKu }}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 100px;">业务类型:</label>
            <select class="form-select" [(ngModel)]="queryParams.YeWuLeiXing" name="YeWuLeiXing">
              <option [ngValue]="null">全部</option>
              <option *ngFor="let type of yeWuLeiXingOptions" [value]="type">{{ type }}</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 100px;">出入库类型:</label>
            <select class="form-select" [(ngModel)]="queryParams.ChuRuKuLeiXing" name="ChuRuKuLeiXing">
              <option [ngValue]="null">全部</option>
              <option *ngFor="let type of chuRuKuLeiXingOptions" [value]="type">{{ type }}</option>
            </select>
          </div>
        </div>
        
        <div class="col-md-8">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 100px;">日期范围:</label>
            <div class="input-group">
              <input type="date" class="form-control" [(ngModel)]="dateRange.start" name="dateStart" (change)="onDateRangeChange()" placeholder="开始日期">
              <span class="input-group-text">至</span>
              <input type="date" class="form-control" [(ngModel)]="dateRange.end" name="dateEnd" (change)="onDateRangeChange()" placeholder="结束日期">
              <button class="btn btn-outline-secondary" type="button" (click)="dateRange.start=''; dateRange.end=''; onDateRangeChange()" title="清空日期">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-12 text-center">
          <button type="button" class="btn btn-secondary me-2" (click)="reset()">重置</button>
          <button type="submit" class="btn btn-primary">查询</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 统计卡片区域 -->
  <div class="card-body border-bottom">
    <div class="row">
      <div class="col-md-6">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="row">
              <div class="col">
                <div class="h2 text-primary">{{ statistics.ruKuShuLiang || 0 }}</div>
                <div class="text-muted">入库数量</div>
              </div>
              <div class="col">
                <div class="h2 text-warning">{{ (statistics.ruKuJinE || 0) | currency:'￥' }}</div>
                <div class="text-muted">入库金额</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="row">
              <div class="col">
                <div class="h2 text-primary">{{ statistics.chuKuShuLiang || 0 }}</div>
                <div class="text-muted">出库数量</div>
              </div>
              <div class="col">
                <div class="h2 text-warning">{{ (statistics.chuKuJinE || 0) | currency:'￥' }}</div>
                <div class="text-muted">出库金额</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 操作按钮区域 -->
  <div class="card-body border-bottom">
    <button class="btn btn-secondary me-2" type="button" (click)="exportData()">
      <i class="fa fa-download me-1"></i>导出
    </button>
    <button class="btn btn-secondary" type="button" (click)="refresh()">
      <i class="fa fa-refresh me-1"></i>刷新
    </button>
  </div>
  
  <!-- 如果没有数据显示提示 -->
  <div class="alert alert-info mt-3" *ngIf="!loading && dataList.length === 0">
    <strong>提示：</strong> 没有找到该商品的出入库流水记录。
  </div>
  
  <!-- 加载指示器 -->
  <div *ngIf="loading" class="card-body text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2">正在加载数据，请稍候...</p>
  </div>
  
  <!-- 数据表格区域 -->
  <div class="card-body table-responsive" *ngIf="!loading && dataList.length > 0">
    <table class="table table-striped table-hover">
      <thead class="table-light">
        <tr>
          <th width="40"><input type="checkbox"></th>
          <th width="60">序号</th>
          <th>出入库单号</th>
          <th>出入库日期</th>
          <th>业务类型</th>
          <th>出入库类型</th>
          <th>仓库名称</th>
          <th>入库数量</th>
          <th>出库数量</th>
          <th>入库金额</th>
          <th>出库金额</th>
          <th>经办人</th>
          <th>制单人</th>
          <th>所在片区</th>
          <th>有效期</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of dataList; let i = index">
          <td><input type="checkbox" [checked]="selectedRows.includes(item.id)" (change)="toggleSelection(item.id)"></td>
          <td>{{ i + 1 }}</td>
          <td>{{ item.chuRuKuDanHao || item.ioOrderCode }}</td>
          <td>{{ (item.chuRuKuRiQi || item.iodate) ? (item.chuRuKuRiQi || item.iodate | date:'yyyy-MM-dd') : '未设置' }}</td>
          <td>{{ item.yeWuLeiXing || item.businessType }}</td>
          <td>{{ item.chuRuKuLeiXing || item.ioType }}</td>
          <td>{{ item.cangKuMingCheng || item.warehouseName }}</td>
          <td>{{ item.ruKuShuLiang || item.inQuantity || 0 }}</td>
          <td>{{ item.chuKuShuLiang || item.outQuantity || 0 }}</td>
          <td>{{ (item.ruKuJinE || item.inAmount || 0) | currency:'￥' }}</td>
          <td>{{ (item.chuKuJinE || item.outAmount || 0) | currency:'￥' }}</td>
          <td>{{ item.jingBanRen || item.operator }}</td>
          <td>{{ item.zhiDanRen || item.creator }}</td>
          <td>{{ item.suoZaiPianQu || item.department }}</td>
          <td>{{ (item.youXiaoQi || item.createTime) ? (item.youXiaoQi || item.createTime | date:'yyyy-MM-dd') : '未设置' }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- 分页区域 -->
  <div class="card-footer d-flex justify-content-between align-items-center" *ngIf="!loading && dataList.length > 0">
    <div>
      共 {{ total }} 条
    </div>
    <nav aria-label="分页导航">
      <ul class="pagination pagination-sm mb-0">
        <li class="page-item" [class.disabled]="pageIndex === 1">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(1)">首页</a>
        </li>
        <li class="page-item" [class.disabled]="pageIndex === 1">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex - 1)">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        
        <li class="page-item" *ngFor="let page of [1,2,3,4,5] | slice:0:5" 
            [class.active]="pageIndex === page">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(page)">{{ page }}</a>
        </li>
        
        <li class="page-item" [class.disabled]="pageIndex === Math.ceil(total/pageSize)">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex + 1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li class="page-item" [class.disabled]="pageIndex === Math.ceil(total/pageSize)">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(Math.ceil(total/pageSize))">末页</a>
        </li>
      </ul>
    </nav>
    <div>
      <select class="form-select form-select-sm d-inline-block" style="width: auto;"
              [(ngModel)]="pageSize"
              (change)="pageSizeChange($event.target.value)">
        <option *ngFor="let size of [10, 20, 30, 50]" [value]="size">{{ size }}条/页</option>
      </select>
    </div>
  </div>
</div> 